<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>calc</title>
	<script>
		var str = "(3+4)*5-6";
		str = "1+((2+3)×4)-5";
		str = str.replace(/\s*/g, "")

		var preExp = preExpressionConvert(str)
		var result = calcPreExpression(preExp)


		

		console.log(result)
		

		function preExpressionConvert(str) {
			str = str.replace(/\s*/g, "")
			var s1 = [], s2 = [];

			var len = str.length
			for(var i = len - 1; i >= 0; i--) {
				var cur = str[i]

				if(isNum(cur)) {
					s2.push(parseFloat(cur))
					continue
				}

				if(isOp(cur)) {
					// debugger;
					while(true) {
						// console.log(cur)
						if(s1.length === 0 || cur === ")") {
							s1.push(cur)
							break;
						} 
						else if(cur === "(") {
							while(true) {
								var t = s1.pop()
								if(t === ")"){
									break;
								} else {
									s2.push(t)
								}
							}
							break
						}
						else {
							var t = s1.pop()
							var tl = getOpLevel(t)
							var curlevel = getOpLevel(cur)
							if(curlevel >= tl) {
								s1.push(t)
								s1.push(cur)
								break;
							} else {
								s2.push(t)
							}
						}
					}
				}

			}

			while(true) {
				var t = s1.pop();
				if(!t) {
					break;
				}else {
					s2.push(t)
				}
			}

			var pre = "";
			while(true) {
				var t = s2.pop()
				if(!t)
					break

				pre += t
			}
			return pre
		}

		

		function calcPreExpression(preExp) {
			var s3 = []
			var r = 0
			for(var i = preExp.length - 1; i >= 0; i--) {
				var cur = preExp[i]
				if(isNum(cur)){
					s3.push(parseFloat(cur))
					// console.log(s3)
					continue
				}

				if(isOp(cur)) {
					var t1 = s3.pop()
					var t2 = s3.pop()

					r = calc(cur, t1, t2)
					s3.push(r)
				}
			}
			return r;
		}

		function calc(op, x, y) {
			switch(op) {
				case '*':
				case '×':
					return x*y

				case '+':
					return x+y

				case '-':
					return x-y
				case '/':
					return x/y
			}
		}



		function isOp(str) {
			if(str === "*" || str === "+" || str === "/" || str === "-"
				|| str === ")" || str === "(" || str === "×")
				return true
			return false
		}

		function getOpLevel(op) {
			if(str === "*" || str === "/")
				return 2
			else if(str === "+" || str === "-")
				return 1
			return null
		}

		function isNum(str) {
			var p = /^\d+(\.\d+)?$/g
			return p.test(str)
		}

		window.onload = function() {
			document.querySelector("#execute").onclick = function() {
				var exp = document.querySelector("#exp").value
				if(exp.length > 0) {
					var preExp = preExpressionConvert(exp)
					var result = calcPreExpression(preExp)
					document.querySelector("#result").innerHTML = result
				}
			}
		}
	</script>
	<style>
		body {
			font-family: 'microsoft-yahei'
		}
		.box {
			
			background: #ccc;
			display: flex;

		}

		.wrapper {
			display: flex;
			flex-direction: row;
			width: 320px;
		}

		.box-item {
			width: 80px;
			height: 80px;
			background: #fff;
			/*border-bottom: 1px solid #ccc;
			border-right: 1px solid #ccc;*/
			border: 1px solid #ccc;
			box-sizing: border-box;

			/*border-right: none;*/
			font-size: 26px;
			line-height: 80px;
			text-align: center;
			cursor: pointer;
		}

		.box-item:nth-child(3) {
			border-right: 1px solid #ccc;
		}

		.box-item2 {
			height: 160px;
			line-height: 160px;
			vertical-align: bottom;
		}

		.box1 {
			flex-direction: column;
		}

		#line {
			border: 1px solid #ccc;
			width: 320px;
			box-sizing: border-box;
			height: 60px;
		}
		#line input {
			width: 318px;
			border: none;
			height: 60px;
		}
	</style>
</head>
<body>
<div id="line">
	<input type="text">
</div>
<div class="wrapper">
	<div class="box box1">
		<div class="box-item">AC</div>
		<div class="box-item">7</div>
		<div class="box-item">4</div>
		<div class="box-item">1</div>
		<div class="box-item">%</div>
	</div>
	<div class="box box1">
		<div class="box-item">←</div>
		<div class="box-item">8</div>
		<div class="box-item">5</div>
		<div class="box-item">2</div>
		<div class="box-item">0</div>
	</div>
	<div class="box box1">
		<div class="box-item">÷</div>
		<div class="box-item">9</div>
		<div class="box-item">6</div>
		<div class="box-item">3</div>
		<div class="box-item">.</div>
	</div>
	<div class="box box1">
		<div class="box-item">×</div>
		<div class="box-item">+</div>
		<div class="box-item">-</div>
		<div class="box-item box-item2">=</div>
	</div>
</div>

<input type="text" id="exp">
<button id="execute">=</button>
<div id="result"></div>
</body>
</html>